<template>
    <div class="main">
        <navigator url="../dizhi/main">
            <div v-if="hasAddress" class="orders-address">
                <text class="orders-address-name">收货人: {{address.name}}</text>
                <text class="orders-address-phone">电话: {{address.phone}}</text>
                <div class="orders-address-detail">{{address.detail}}</div>
            </div>
            <div wx:else class="orders-no-address">添加收货地址</div>
        </navigator>

        <div class="orders-box">
            <div v-for="(item,index) in carts" :key="index" class="orders-list">
                <image class="orders-thumb" :src="item.goodmgd"></image>
                <div class="orders-pro-name">{{item.goodname}}</div>
                <div class="orders-pro-price">￥{{item.goodprice}}</div>
                <div class="orders-count-num">×{{item.num}}</div>
            </div>
        </div>

        <div class="orders-footer">
            <div class="orders-footer-total">付款合计：￥{{totalPrice}}</div>
            <div class="orders-footer-btn" @tap="toPay">去付款</div>
        </div>
    </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      address: {},
      hasAddress: false,
      totalPrice: 0,
      carts: []
    }
  },
  beforeMount () {
    // 触发授权
    this.handleGetUserInfo()
    var that = this
    // 云函数调用getpoenid获取openid
    wx.cloud.callFunction({
      name: 'getopenid',
      data: {
        name: ''
      },
      success (res) {
        var id = []
        console.log(res)
        id = that.my
        that.openid = res.result.openid
        console.log(that.openid)
        for (var i = 0; i < id.length; i++) {
          if (that.openid === id[i]) {
            that.admin = true
          }
        }
      },
      fail (res) {
        console.log(res)
      }
    })
    wx.cloud.database().collection('order').where({
      _openid: this.$mp.query.openid
    }).get({
      success: res => {
        this.carts = res.data
        console.log(res.data)
        setTimeout(() => {
          this.hasList = true
          this.getTotalPrice()
        }, 2000)
      },
      fail: console.error
    })
    const self = this
    wx.getStorage({
      key: 'address',
      success (res) {
        self.setData({
          address: res.data,
          hasAddress: true
        })
        console.log('你好')
        console.log(res)
        console.log('你好')
      }
    })
  },

  components: {
    card
  },

  methods: {
    // 获取用户信息
    handleGetUserInfo () {
      wx.getUserInfo({
        success: (data) => {
          console.log(data)
          this.userInfo = data.userInfo
          this.isShow = true
        },
        fail: () => {
          console.log('获取失败')
        }
      })
    },
    getUserInfo (data) {
      // 判断用户是否授权
      console.log(data)
      if (data.mp.detail.rawData) {
      // 用户授权
        this.handleGetUserInfo()
      }
    },
    /**
     * 计算总价
     */
    getTotalPrice () {
      let carts = this.carts
      let total = 0
      for (let i = 0; i < carts.length; i++) {
        if (carts[i].selected) {
          total += carts[i].num * carts[i].goodprice
        }
      }
      this.carts = carts
      this.totalPrice = total.toFixed(2)
      console.log(total.toFixed(2))
    },
    toPay () {
      wx.showModal({
        title: '提示',
        content: '本系统只做演示，支付系统已屏蔽',
        text: 'center',
        complete () {
          wx.switchTab({
            url: '../../pages/person/main'
          })
        }
      })
    }
  },
  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.orders-address{
    position: relative;
    padding: 20rpx 50rpx 20rpx 35rpx;
    font-size: 14px;
    line-height: 25px;
    border-bottom: 20rpx solid #ededed;
    color: #adadad;
}
.orders-address::after{
    position: absolute;
    right: 30rpx;
    top: 60rpx;
    content: '';
    width: 8px;
    height: 8px;
    border-top: 4rpx solid #8ed145;
    border-right: 4rpx solid #8ed145;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.orders-address-name{
    display: inline-block;
    width: 300rpx;
}

.orders-no-address{
    position: relative;
    height: 90rpx;
    line-height: 90rpx;
    color: #adadad;
    border-bottom: 20rpx solid #ededed;
    text-align: center;
}
.orders-no-address::after{
    position: absolute;
    right: 30rpx;
    top: 34rpx;
    content: '';
    width: 16rpx;
    height: 16rpx;
    border-top: 4rpx solid #8ed145;
    border-right: 4rpx solid #8ed145;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.orders-box{
    padding-bottom: 105rpx;
}
.orders-list{
    position: relative;
    padding:20rpx 20rpx 20rpx 220rpx;
    height: 180rpx;
    border-bottom: 1rpx solid #ededed;
}
.orders-thumb{
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    width: 180rpx;
    height: 180rpx;
}
.orders-list view{
    line-height: 60rpx;
}

.orders-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 95rpx;
    line-height: 95rpx;
    border-top: 1rpx solid #ededed;
}
.orders-footer .orders-footer-total{
    display: inline-block;
    width: 510rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
    color: #8ed145;
}
.orders-footer .orders-footer-btn{
    display: inline-block;
    width: 240rpx;
    text-align: center;
    color: #fff;
    background: #8ed145;
}
</style>
